<script setup>
    import { computed, onMounted } from 'vue'
    import { getVillageList, getVillageDataSearch, getVillageDataChart, getVillageCurrentDistributeList, getVillagePoliticsStatusList, getVillageReligionList, getHouseholdRelationshipList } from '@/api/govern'
    import RegionPie from './RegionPie.vue'
    import SexPie from './SexPie.vue'
    import HouseTypePie from './HouseTypePie.vue'

    // 是否显示数据查询
    let dialogVisible = $ref(false)

    // 村列表
    let villageList = $ref([])

    const showDialog = (data, orgCode) => {

        if(data){
            villageList = data
        }else {
            getVillageList().then(res => {
                if(res.success){
                    villageList = res.result
                }
            })
        }

        dialogVisible = true
        personList = []
        totalCount = 0
        filterParams = {
            pageNo: 1,
            pageSize: 10, 
            orgCode: orgCode
        }
        getPersonList()
    }

    // 获取居住地分布, 政治面貌, 宗教信仰列表
    let currentDistributeList = $ref([])
    let politicsStatusList = $ref([])
    let religionList = $ref([])

    // 与户主关系列表
    let relationList = $ref([])

    onMounted(() => {
        getVillageCurrentDistributeList().then(res => {
            currentDistributeList = res.result
        })

        getVillagePoliticsStatusList().then(res => {
            politicsStatusList = res.result
        })

        getVillageReligionList().then(res => {
            religionList = res.result
        })

        getHouseholdRelationshipList().then(res => {
            relationList = res.result
        })
    })


    // 居民信息
    let personList = $ref([])

    let filterParams = $ref({})

    // 总条数
    let totalCount = $ref(0)

    let dataLoading = $ref(false)

    // 显示分析类型
    let analyseType = $ref('table')

    // 表格分析
    let getPersonList = () => {
        dataLoading = true
        let data = JSON.parse(JSON.stringify(filterParams))
        if(!data.orgCode) data.orgCode = 'A01'
        getVillageDataSearch(data).then(res => {
            dataLoading = false
            let { records, total } = res.result
            personList = records
            totalCount = total
        })
    }

    // 分页
    const handleCurrentChange = (page) => {
        filterParams.pageNo = page
        getPersonList()
    }

    // 每页多少条
    const handleSizeChange = (size) => {
        filterParams.pageSize = size
        getPersonList()
    }

    // 点击查询
    const handleClickSearch = () => {
        analyseType = 'table'
        filterParams.pageNo = 1
        getPersonList()
    }

    // 重置
    const handleClickReset = () => {
        filterParams = {
            pageNo: 1,
            pageSize: 10
        }
    }

    // 根据id 查找网格名称
    const findGirdName = (id) => {
        let data = girdData.find((item) => {
            return item.orgCode == id
        })

        return data ? data.departName : ''
    }

    // 是否展开
    let isUnfold = $ref(true)


    // 显示图表分析
    const handleShowChart = () => {
        analyseType = 'chart'
        getDataChart()
    }

    // 居住地分布
    let regionData = $ref([])

    // 性别分布
    let sexData = $ref([])

    // 房屋状态
    let houseStatus = $ref([])

    // 图表数据加载中
    let chartLoading = $ref(false)

    // 图表分析
    const getDataChart = () => {
        chartLoading = true
        let data = JSON.parse(JSON.stringify(filterParams))
        if(!data.orgCode) data.orgCode = 'A01'
        getVillageDataChart(filterParams).then(res => {
            chartLoading = false
            let { consequencePlaceList, consequenceSexList, consequenceHouseStatusList } = res.result

            regionData = consequencePlaceList
            sexData = consequenceSexList
            houseStatus = consequenceHouseStatusList
        })
    }

    // 人物画像
    const handleClickAccount = () => {
        
    }

    defineExpose({
        showDialog
    })


</script>

<template>
    <el-dialog
        v-model="dialogVisible"
        width="1100px"
        custom-class="xz-dialog xz-search-dialog"
    >
        <div class="dialog-title">以房管人数据查询</div>
        <div class="search-info">
            
            <div class="search-wrap xz-filter-wrap">
                <el-form :inline="true" :label-width="85">
                    <el-form-item label="区域">
                        <el-select v-model="filterParams.orgCode" placeholder=" ">
                            <el-option
                                v-for="(item, index) in villageList"
                                :key="index"
                                :label="item.sysOrgCode_dictText"
                                :value="item.sysOrgCode"
                            >
                                {{ item.sysOrgCode_dictText }}
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="管理编号">
                        <el-input v-model="filterParams.manageNumber" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                        <el-input v-model="filterParams.name" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号">
                        <el-input v-model="filterParams.idCard" clearable></el-input>
                    </el-form-item>
                    <template v-if="isUnfold">
                        <el-form-item label="联系方式">
                            <el-input v-model="filterParams.phone" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="filterParams.sex" placeholder=" " clearable @clear="delete filterParams.sex">
                                <el-option
                                    v-for="(item, index) in [{ name: '男', id: 1 }, { name: '女', id: 2 }]"
                                    :key="index"
                                    :label="item.name"
                                    :value="item.id"
                                >
                                    {{ item.name }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="与户主关系">
                            <el-select v-model="filterParams.ownerConcern" placeholder=" " clearable @clear="delete filterParams.politicsStatus">
                                <el-option
                                    v-for="(item, index) in relationList"
                                    :key="index"
                                    :label="item.itemText"
                                    :value="item.itemValue"
                                >
                                    {{ item.itemText }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="宗教信仰">
                            <el-select v-model="filterParams.religion" placeholder=" " clearable @clear="delete filterParams.religion">
                                <el-option
                                    v-for="(item, index) in religionList"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                    v-show="item"
                                >
                                    {{ item }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="政治面貌">
                            <el-select v-model="filterParams.politicsStatus" placeholder=" " clearable @clear="delete filterParams.politicsStatus">
                                <el-option
                                    v-for="(item, index) in politicsStatusList"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                >
                                    {{ item }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="户籍地">
                            <el-input v-model="filterParams.censusArea" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="现居地">
                            <el-input v-model="filterParams.currentResidence" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="现居地分布">
                            <el-select v-model="filterParams.currentDistribute" placeholder=" " clearable @clear="delete filterParams.currentDistribute">
                                <el-option
                                    v-for="(item, index) in currentDistributeList"
                                    :key="index"
                                    :label="item"
                                    :value="item"
                                    v-show="item"
                                >
                                    {{ item }}
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </template>
                </el-form>

                <div class="btn-wrap">
                    <el-button @click="handleClickReset">重置</el-button>
                    <el-button type="primary" @click="handleClickSearch">查询</el-button>
                </div>

                <div class="fold flex-center" @click="isUnfold=!isUnfold">
                    {{ isUnfold ? '收起' : '展开' }}
                    <i class="arrow" :class="{ 'arrow-top': isUnfold }"></i>
                </div>

            </div>

            <!-- 查询结果 -->
            <div class="search-result mt10">
                <div class="title flex-between">
                    <span class="text">查询结果</span>
                    <div class="tabbar flex">
                        <span :class="{ active: analyseType == 'table' }" @click="handleClickSearch">表格分析</span>
                        <span :class="{ active: analyseType == 'chart' }" @click="handleShowChart">图表分析</span>
                    </div>
                </div>

                <div 
                    class="table-wrap" 
                    v-if="analyseType == 'table'"
                    v-loading="dataLoading"
                >
                    <el-table 
                        :data="personList" 
                        style="width: 100%"
                        :height="isUnfold ? 363 : 411"
                        size="large"
                        class="xz-table"
                        :scrollbar-always-on="true"
                        @row-click="handleClickAccount($event)"
                    >
                        <el-table-column prop="org_dict" label="村居" min-width="180" />
                        <el-table-column prop="manageNumber" label="管理编号" min-width="110" />
                        <el-table-column prop="name" label="姓名" min-width="70" align="center" />
                        <el-table-column prop="sex_dictText" label="性别" min-width="70" align="center" />
                        <el-table-column prop="nation_dictText" label="民族" min-width="70" align="center" />
                        <el-table-column prop="ownerConcern_dictText" label="与户主关系" min-width="90" align="center" />
                        <el-table-column prop="idCard" label="身份证号码" min-width="170" />
                        <el-table-column prop="phone" label="联系方式" min-width="120" />
                        <el-table-column prop="politicsStatus" label="政治面貌" min-width="70" align="center" />
                        <el-table-column prop="religion" label="宗教信仰" min-width="70" align="center" />
                        <el-table-column prop="currentDistribute" label="现居住地分布" min-width="100" show-overflow-tooltip />
                        <el-table-column prop="currentResidence" label="现居住地" min-width="200" show-overflow-tooltip />
                        <el-table-column prop="censusArea" label="户籍地" min-width="120" show-overflow-tooltip />
                    </el-table>

                    <el-pagination 
                        class="mt20" 
                        background 
                        layout="total, sizes, prev, pager, next" 
                        :total="totalCount" 
                        :page-size="filterParams.pageSize"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                    />
                </div>

                <!-- 图表分析 -->
                <div 
                    class="chart-analysis flex" 
                    :style="{ height: isUnfold ? '204px' : '300px'}"
                    v-if="analyseType == 'chart'"
                    v-loading="chartLoading"
                >
                    <template v-if="!chartLoading">
                        <region-pie :regionData="regionData"></region-pie>
    
                        <sex-pie :sexData="sexData"></sex-pie>
    
                        <house-type-pie :houseStatus="houseStatus"></house-type-pie>
                    </template>

                </div>

            </div>

        </div>

    </el-dialog>
</template>

<style lang="less" scoped>
    .xz-search-dialog{
        .search-info{
            padding: 0 14px;

            .search-wrap{
                margin-top: 20px;
                padding: 20px 30px;
                background: rgba(152,193,255,0.08);
                position: relative;

                .fold{
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    width: 62px;
                    height: 19px;
                    margin-left: -31px;
                    background: url('../../../assets/images/fold-bg.png') center no-repeat;
                    color: #fff;
                    text-align: center;
                    cursor: pointer;

                    .arrow{
                        display: inline-block;
                        width: 12px;
                        height: 6px;
                        background: url('../../../assets/images/arrow.png') center no-repeat;
                        margin-left: 3px;
                        transition: all .3s;

                        &.arrow-top{
                            transform: rotate(180deg);
                        }
                    }
	            }
            }

            .btn-wrap{
                margin: 10px 0;
                text-align: center;
            }
        }

        .search-result{
            padding: 15px;
            background: rgba(152,193,255,0.08);

            .title{
                color: #fff;
                margin-bottom: 8px;

                .text{
                    font-size: 16px;
                    padding-left: 4px;
                }

                .tabbar{
                    border: 1px solid #00A4FF;
                    border-radius: 4px;

                    span{
                        width: 78px;
                        line-height: 30px;
                        text-align: center;
                        cursor: pointer;

                        &.active{
                            background: #00A4FF;
                        }
                    }
                }
            }
        }

    }
</style>